<template>
<button @click="myBtn">toggle</button>
<transition name="fade">
<div class="box" v-if="show"></div>
</transition>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
setup () {
const state = reactive({
show: true
})
const myBtn = () => {
state.show=!state.show
}
return {
...toRefs(state),
myBtn
}
}
}
</script>
<style scoped>
.box {
width:100px;
height: 200px;
background-color:greenyellow;
}
.fade-enter-active, .fade-leave-active {
transition: height 5s;
}
.fade-enter {
    height: 0;
}
.fade-enter-to {
height: 200px;
}
.fade-leave {
height: 200px;
}
.fade-leave-to {
height: 0;
}
</style>